<template>
    <div class="iframe">
        <div class="i-title">
            <h3>获取全局变量</h3>
        </div>
        <div class="i-tip">
            <span class="span">姓名：</span><el-input type="text" v-model="name" />
        </div>
        <div class="i-tip">
            <span class="span">爱好：</span>{{ likes.toString() }}
        </div>
        <div class="i-tip">
            <span class="span">管理员：</span>{{ isAdmin ? '是' : '否' }}
        </div>
        <div class="i-tip">
            <span class="span">点击量：</span>{{ clickNum }}
        </div>
        <div class="i-tip">
            <span class="span">特殊量：</span>{{ clickNumPar }}
        </div>
        <div class="i-tip">
            <el-button @click="update">变更</el-button>
            <el-button @click="reset">还原</el-button>
            <el-button @click="add">加10</el-button>
        </div>
    </div>
</template>

<script setup>
import { storeToRefs, mapActions } from 'pinia'
import { onMounted } from "vue"
import { useStore } from '../../store'

const store = useStore();
// 1.地图式引入
const fn = {
    ...mapActions(useStore, ['changeName', 'changLikes'])
}
let {
    name,
    likes,
    isAdmin,
    clickNum,
    clickNumPar
} = storeToRefs(store);

function changeV() {
    window.setInterval(() => {
        clickNum.value++
    }, 1000)
}

onMounted(() => {
    changeV();
})
// 更新局部状态
function update() {
    fn.changeName("陶国荣");
    fn.changLikes({ idx: 2, val: '打篮球' })
}
// 重置批量更新初始值
function reset() {
    store.$patch(state => {
        state.clickNum = 0;
        state.name = "tgrong";
        state.isAdmin = false;
        state.likes[2] = '跑步'
    })
}
// 2.直接调用方法
const add = () => {
    store.changeClickNum(10)
}

</script>
